<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作简易计算器</title>
  <script src="../Vue.js"></script>

</head>
<body>

<div id="divHandle">

<input type="text" v-model="no1">

  <select v-model="sp">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
  </select>

  <input type="text" v-model="no2">

  <input type="button" value="=" @click="click">

  <input type="text" v-model="no3">

</div>

<script>
 new Vue({
   el:'#divHandle',
   data:{
     no1:0,
     no2:0,
     no3:0,
     sp:'+'
   },
   methods:{
     click(){
       switch (this.sp) {
         case "+":
           this.no3 = parseInt(this.no1) + parseInt(this.no2);
            break;

         case "-":
           this.no3 = parseInt(this.no1) - parseInt(this.no2);
           break;

         case "*":
           this.no3 = parseInt(this.no1) * parseInt(this.no2);
           break;

         case "/":
           this.no3 = parseInt(this.no1) / parseInt(this.no2);
           break;
       }

     // //  利用eval投机取巧的写法,在比较复杂的情况下可与考虑使用，但是在正规开发中尽量少用
     //    var total = '  parseInt(this.no1) ' + this.sp + ' parseInt(this.no2) ';
     //   this.no3 = eval(total);

     }
   }
 })
</script>
</body>
</html>
